<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/vue.js"></script>
    <!--    引入路由文件-->
    <script src="../js/vue-router3.js"></script>
</head>
<body>
<!--

-->
<div id="app">
    <!--声明路由组件的出口-->
    <!-- 路由匹配到的组件将渲染在这里 -->
    <router-view></router-view>
    <hr>
    <h2>路由的切换方式1 超链接</h2>
    <a href="#/login">登录</a>
    <a href="#/register">注册</a>
    <hr>
    <h2>路由的切换方式2 router-link to string </h2>
    <router-link to="/login">登录</router-link>
    <router-link to="/register">注册</router-link>
    <hr>
    <h2>路由的切换方式3 router-link :to </h2>
    <router-link :to="{path:'/login'}">登录</router-link>
    <!--    跳转路径通过路由别名设置 便于后期的维护 -->
    <router-link :to="{name:'register'}">注册</router-link>
    <hr>
    <h2>路由的切换方式4 javascript代码 </h2>
    <button @click="login">登录</button>
    <button @click="register">注册</button>
</div>


<script>
    /*定义路由组件  login  register*/
    let login = {
        template: `
        <div>
            <h2>登录</h2>
            <form action="#">
                <p><input type="text" placeholder="请输入用户名"></p>
                <p><input type="password" placeholder="请输入密码"></p>
                <p><input type="submit" value="立即登录"></p>
            </form>
        </div>
        `
    }

    let register = {
        template: `
        <div>
            <h2>注册</h2>
            <form action="#">
                <p><input type="text" placeholder="请输入用户名"></p>
                <p><input type="password" placeholder="请输入密码"></p>
                <p><input type="submit" value="立即注册"></p>
            </form>
        </div>
        `
    }

    let file404 = {
        template: `
            <div>404 页面找不到</div>
        `
    }

    // 定义路由列表   路径和组件的映射关系
    let routes = [
        {
            path: '/',
            redirect: '/login'   // 重定向
        },
        {
            path: '/login',  // 路径
            component: login,  // 路径对应的组件
            name: 'login'    //  路由的别名
        },
        {
            path: '/register',
            component: register,
            name: 'register'
        },
        {
            path: '/*',
            component: file404
        }
    ]

    // 创建路由对象 router
    let router = new VueRouter({
        routes
    })

    let vm = new Vue({
        el: '#app',
        data: {},
        methods: {
            login() {
                // 将路由切换到login   this.$router 路由管理器对象
                // this.$router.push('/login')  // vm
                // this.$router.push({path:'/login'})  // vm
                this.$router.push({name:'login'})  // vm
            },
            register() {
                // 将路由切换到register
                // 通过注册业务逻辑的判定  嵌入   ajax http  200 301 404  401 403  405  500    0  1    {code：业务状态码 ,message:提示信息,data:{count:数据总条数,tableData:当前页数据}}
                this.$router.push('/register')
            }
        },
        components: {
            login, register
        },
        //     扩展vue的路由功能
        router
    })

</script>

</body>
</html>